<template>
    <!-- 工具页 -->
    工具页
    <!-- 上传图片 -->
    <view class="w-32 h-32 flex flex-col items-center relative">
        <image v-if="uploadImgUrl" :src="uploadImgUrl" class="w-full h-full"></image>
        <view
            v-else
            class="w-full h-full bg-gray-200 rounded-md flex items-center justify-center"
            @click="chooseImage"
        >
            <Uploader />
        </view>

        <view v-if="uploadImgUrl" class="absolute top-2 right-2" @click="deleteImage">
            <MaskClose />
        </view>
    </view>
    <view class="mt-4">
        {{ uploadImgUrl }}
    </view>
</template>

<script lang="ts" setup>
import { apiConfig } from '@/api/request'
import Taro from '@tarojs/taro'
import { ref } from 'vue'
// 删除图标
import { MaskClose, Uploader } from '@nutui/icons-vue-taro'

const uploadImgUrl = ref('')
const chooseImage = () => {
    Taro.chooseImage({
        count: 1,
        sizeType: ['original'],
        sourceType: ['album', 'camera'],
        success: (res) => {
            const file = res.tempFiles[0]
            // 上传
            Taro.uploadFile({
                url: `${apiConfig.API_BASE_URL}/carpark/upload.json`,
                filePath: file.path,
                name: 'file',
                formData: {},
                success: (res) => {
                    console.log('res', res)
                    const { result } = JSON.parse(res.data)
                    const { url } = result

                    uploadImgUrl.value = url
                }
            })
        }
    })
}
const deleteImage = () => {
    uploadImgUrl.value = ''
}
</script>
